import './index.scss';
export default {
  name: "AElForm",
  props: {
    margin: { type: String, default: "0" },
    padding: { type: String, default: "0" },
    labelWidth: { type: String, default: "70px" }, // 标签宽度
    data: { type: Object, default: () => ({}) }, // 配置对象
    gutter: { type: Number, default: 20 }, // 栅栏间隔
    rows: { type: Number, default: 4 }, // 默认一排四个
    initData: { type: Object, default: () => ({}) }, // 初始化数据
    gainLabelLineHeight: { type: Function, default: () => null }, // 获取实例方法
  },
  data() {
    return {
      form: {},
      time: null,
      debounce: this.$FN.debounce(this.change, 100)
    }
  },
  watch: {
    initData: {
      deep: true,
      immediate: true,
      handler() {
        this.initForm()
      }
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    /**
     * 初始操作
     */
    init() {
      // 将表单实例传递给父级
      let { gainLabelLineHeight = () => null } = this.$listeners;
      gainLabelLineHeight && gainLabelLineHeight(this.getElForm());
    },
    /**
     * 初始化表单
     */
    initForm() {
      // 获取实例props配置
      let { data = {}, initData = {}, form = {} } = this;
      Object.keys(data).forEach(key => { form[key] = initData[key] || this.matchType(data[key].type) });
    },
    /**
     * 重置表单
     */
    resetForm() {
      this.initForm();
      return this.getForm();
    },
    /**
     * 匹配不同类型返回不同默认值
     */
    matchType(type = "input") {
      switch (type) {
        case "checkbox": return []
        default: return null;
      }
    },
    /**
     * input事件触发
     */
    inputEvent(val, key) {
      // 避免重复触发多次
      this.updateData(val, key, false);
    },
    /**
     * 响应式数据更新
     * val 更新的值 key 更新的key isChange 是否触发change通知
     */
    updateData(val, key, isChange = true) {
      // 触发响应式数据更新
      this.form = { ...this.form, [key]: val };
      isChange && this.debounce();
    },
    /**
     * 数据更新防抖
     */
    change() {
      // 通知数据更新了
      let { change = () => null } = this.$listeners;
      change(this.getForm());
    },
    /**
     * 获取表单
     */
    getForm() {
      return this.$FN.removeEmpty(this.form);
    },
    /**
     * 校验表单
     */
    validateForm(fn = () => null) {
      this.$refs.AElForm.validate(flag => flag && fn(flag, this.getForm()));
    },
    /**
     * 返回子组件表单实例
     */
    getElForm() {
      return this.$refs.AElForm;
    },
    /**
     * 将配置转为dom
     * @param {Object} data 传递一个配置对象过来
     */
    formater(data = {}) {
      // 获取响应式数据
      let { form } = this;
      // 获取row/col的配置
      let { gutter = 20, rows = 4 } = this;
      // 获取实例事件
      let { inputEvent = () => null, updateData = () => null } = this;
      // 获取其它配置
      let { rowProps = {}, colProps = {} } = this.$attrs;

      return (
        <div class="whole">
          <el-row gutter={gutter} props={rowProps}>
            {
              Object.keys(data).map(key => (
                <el-col class="el-form-col" span={24 / (data[key].rows || rows)} props={colProps} key={key}>
                  <el-form-item props={data[key]} prop={key}>
                    <AElFormItem form={form} data={data[key]} aligning={data[key]["aligning"]} prop={key} onInput={e => inputEvent(e, key)} onChange={e => updateData(e, key)} updateData={updateData} />
                  </el-form-item>
                </el-col>
              ))
            }
          </el-row>
        </div>
      )
    }
  },
  render() {
    // 获取响应式数据
    let { form: model = {} } = this;
    // 获取实例方法
    let { formater = () => null } = this;
    // 获取实例props数据
    let { margin = null, padding = null, data: FormData = {}, labelWidth = "0" } = this;
    // 获取其它配置
    let { formProps = {}, ...rest } = this.$attrs;

    return (<div class="a-el-form" style={{ margin, padding }}><el-form ref="AElForm" labelWidth={labelWidth} props={{ ...rest, ...formProps, model }} >{formater(FormData)}</el-form></div>)
  }
};